<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../lib/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../lib/themes/icon.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<script type="text/javascript" src="../lib/jquery.min.js"></script>
	<script type="text/javascript" src="../lib/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../lib/datagrid-filter.js"></script>
    <script type="text/javascript" src="../lib/locale/easyui-lang-zh_CN.js"></script>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="../lib/jiekou.js"></script>
	<script type="text/javascript" src="../lib/tools.js"></script>
    <script type="text/javascript" src="../lib/wangEditor.min.js"></script>
	<script type="text/javascript" src="../lib/base64.js"></script>
</head>
<body>

    <div id="editorwin" class="easyui-window" maximized=true title="操作" closed="true" style="width:100%;height:200px">
        <table style="margin-left: 20px;margin-top: 20px;">
            <tr>
                <td>
                    <text >标题</text>
                    <input type="text" id="boketitle">
					<input type="hidden" id="datainput" data="">
                    <a href="#" id="sureBtn" class="easyui-linkbutton" iconCls="icon-add">确定</a>
                </td>
            </tr>
             <tr><td>内容:</td></tr>
            <tr>
                <td>
                    <div id="div1"></div>
                </td>
            </tr>
        </table>

    </div>
    <!-- <textarea id="text1" style="width:100%; height:50px;"></textarea> -->

    <table id=editgrid></table>
    
  
    <script type="text/javascript">
      const E = window.wangEditor;
    const editor = new E('#div1');
    editor.config.uploadImgServer = Network.geturl("/v1/upload");
    editor.config.uploadFileName = 'image';
    editor.config.height = 400;
// const $text1 = $('#text1')
    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
       // $text1.val(html)
    }
	// 配置菜单栏，设置不需要的菜单
    editor.config.excludeMenus = [
        'emoticon',
        'video'
    ];

    editor.create();
    // editor.txt.html('<p>用 JS 设置的内容</p>')
    // 第一步，初始化 textarea 的值
    //$text1.val(editor.txt.html())
     
     // 配置video server 接口地址
    // editor.config.uploadVideoServer = '/api/upload-video';

     $("#sureBtn").click(function(){
		var p1=editor.txt.html();
		var p2=$("#boketitle").val();
		var p3=$("#datainput").attr("data");
		if(!p1 || !p2){
			$.messager.alert('提示','标题或者内容不能为空');	
			return;
		}
		$.ajax({
				url:Network.geturl("/v1/addorupdateboke"),
				type:'post',
				data:{
                    content:p1+"",
					title:p2+"",
					id:p3+""
				},
				error:function(err){
						$.messager.alert('提示','请求失败!'+err);	
				},
				success:function(res){
					if(res.code==200){
						$('#editorwin').window('close');
						$("#editgrid").datagrid("reload");
					} else{
						$.messager.alert('提示','shibai!'+res.msg);
					}
					
				}
			});

	 });
    var dg = $("#editgrid").datagrid({
				url:Network.geturl("/v1/listboke"),
				dataType:"json",
				pagination: true,
				//rownumbers: true,
				pagination:true,  
				fit:true, 
				nowrap: true, 
				striped:true,
				fitColumns:true,
				striped:true,
				pageSize:5,
				pageList:[5,10,15],
				// hidden:true
				columns:[[
					{field:'id',title:"id序列",width:'15%',align:'center'},
					{field:'title',title:"标题",width:'20%',align:'center'},
					{field:'content',title:'内容', width:'50%',align:'center',hidden:true},
					{field:'operation',title:'操作',width:'15%',align:'center',formatter:  
							function(value,row,index){  
								var rowdata=JSON.stringify(row);
								var base64contentstr= Base64.encode(rowdata);

								// var dele="<a style='color:red;font-size:12px' onclick=deleteclick('"+base64contentstr+"');> 删除 </a>";
								// var edite="<a style='color:blue;font-size:12px' onclick=updateclick('"+base64contentstr+"');> 修改 </a>";
								// return dele+edite;

								var html = "";
								html += "&nbsp;<i class=\"fa fa-pencil-square-o\" style=\"color:#0767c8;font-size:16px;\" aria-hidden=\"true\" title=\"编辑\"  onclick=\"updateclick('"+base64contentstr+"')\"></i>";
								html += "&nbsp;<i class=\"fa fa-trash\" aria-hidden=\"true\" style=\"color:red;font-size:16px;\" title=\"删除\" onclick=\"deleteclick('"+base64contentstr+"')\"></i>"; 
								return html;
								
							}  
						}  
					
					]],
					toolbar: [{
						text: '添加',
						handler: function () { 
							editor.txt.clear();
                            $("#boketitle").val("");
							$("#datainput").attr("data","");
							$('#editorwin').window('open');
						}
						
					}],
				
					onLoadError:function(msg){
	
					},
					onLoadSuccess:function(data){
				
					} 
		});

		dg.datagrid({
			remoteFilter:true,
		});
		
		// dg.datagrid('enableFilter');
		// dg.datagrid('closeFilter',["operation","logo"]);

		function deleteclick(parma){
			var mm = Base64.decode(parma);
			var yy=JSON.parse(mm);
			$.messager.confirm('确认', "确定要删除吗？", function(r){

				if(r){
					//begin
					$.ajax({
						url:Network.geturl("/v1/delboke"),
						type:'post',
						data:{
							id:yy.id+""
						},
						error:function(err){
								$.messager.alert('提示','请求失败!'+err);	
						},
						success:function(res){
							if(res.code==200){
								
								$("#editgrid").datagrid("reload");
							} else{
								$.messager.alert('提示','失败啊'+res.msg);
							}
							
						}
					});

					//end

				}
				

			});
			
			
		}

		function updateclick(parma){
			var mm = Base64.decode(parma);
			// console.log(mm);
			// console.log("-->");
			var yy=JSON.parse(mm);
			//console.log(yy.id,yy.content,yy.title);
			editor.txt.html(yy.content);
			$("#boketitle").val(yy.title);
			$("#datainput").attr("data",yy.id);
			$('#editorwin').window('open');
		}
		
    </script>

</body>


</html>
